<template>
  <div class="home">
    <div class="top">
      <van-search
        shape="round"
        placeholder="请输入搜索关键词"
        @click="goSearch"
      />
    </div>
    <div class="content">
      <van-tabs v-model="active" @click="getlist(active)">
        <van-tab
          v-for="(item, index) in bookstore"
          :key="index"
          :title="item.name"
          :title-class="item.id"
        >
          <!-- 轮播图 -->
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item
              v-for="(item, index) in banners"
              :key="index"
              @click="getid(item.id)"
            >
              <div class="img">
                <img :src="item.cover" />
              </div>
            </van-swipe-item>
          </van-swipe>
        </van-tab>
      </van-tabs>
      <!-- 小说列表 -->
      <div class="novel">
        <div class="box" v-for="(item, i) in listData" :key="i">
          <h2>{{ item.name }}</h2>
          <div class="box-list">
            <div
              class="box-list-item"
              v-for="(items, index) in listData[i].list"
              :key="index"
              @click="getid(items.id)"
            >
              <div class="box-list-item-img">
                <img :src="items.cover" @error="handleError($event)" />
              </div>
              <div>{{ items.title }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      active: 0,
      bookstore: [],
      banners: [],
      listData: [],
      img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fc823bc165add16c76bdefaee090c45c202267a452deaa-lLhkHf_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650685371&t=e67779564f0416a69ca07519acf1045b",
    };
  },
  created() {
    this.getBookCity();
    this.getbanner();
  },

  methods: {
    //没有图片的话用默认图片
    handleError(e) {
      e.currentTarget.src = this.img;
    },
    //获取书城信息
    getBookCity() {
      //发起请求
      this.axios({
        //请求类型
        method: "get",

        //请求路径
        url: "https://apis.netstart.cn/yunyuedu/store/navi.json",

        //如果get请求, 请求参数需要写在params字段中
        params: {
          // appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
          // key: "isHot",
          // value: 1,
        },
      })
        .then((result) => {
          // console.log(result.data.data.navi);
          if (result.status === 200) {
            this.bookstore = result.data.data.navi;
            // console.log("this.bookstore==>", this.bookstore);
          }
        })
        .catch((err) => {
          console.log("err ==> ", err);
        });
    },
    //获取轮播图信息
    getbanner() {
      this.axios({
        //请求类型
        method: "get",
        //请求路径
        url: "https://apis.netstart.cn/yunyuedu/store/show.json?type=publish",
        params: {
          // uuid,
        },
      })
        .then((result) => {
          if (result.status === 200) {
            this.banners = result.data.data.list[0].banners;
            let list = result.data.data.list;
            // console.log("list==>", list);

            for (let index = 0; index < list.length; index++) {
              if (!list[index].name) {
                confirm;
              } else {
                this.listData.push(list[index]);
              }
            }
            // console.log("this.listData", this.listData);
          }
        })
        .catch((err) => {
          console.log("err ==> ", err);
        });
    },
    //获取列表
    getlist(index) {
      let uuid = this.bookstore[index].id;
      // console.log("uuid", uuid);
      let novel = document.querySelector(".novel");
      novel.innerHTML = "";
      this.axios({
        //请求类型
        method: "get",
        //请求路径
        url: "https://apis.netstart.cn/yunyuedu/store/show.json?type=publish",
        params: {
          uuid,
        },
      })
        .then((result) => {
          if (result.status === 200) {
            this.banners = result.data.data.list[0].banners;
            let list = result.data.data.list;
            // console.log("list==>", list);

            for (let index = 0; index < list.length; index++) {
              if (!list[index].list) {
                confirm;
              } else {
                this.listData.push(list[index]);
              }
            }
          }
        })
        .catch((err) => {
          console.log("err ==> ", err);
        });
    },
    //传递书籍的id
    getid(pid) {
      // console.log("pid ==> ", pid);
      this.$router.push({ name: "noveldetail", params: { pid } });
    },
    //点击进入搜索页面
    goSearch() {
      this.$router.push({ name: "search" });
    },
  },
};
</script>

<style lang="less" scoped>
.home {
  width: 100%;
  height: 100%;
  .content {
    width: 100%;
    height: 100%;
    padding-bottom: 80px;

    .my-swipe {
      width: 100%;
      .van-swipe-item {
        margin-top: 10px;
        color: #fff;
        // font-size: 20px;
        text-align: center;
        // background-color: #39a9ed;
        .img {
          width: 100%;
          // height: 140px;
          img {
            width: 100%;
          }
        }
      }
    }
    .box {
      // width: 100%;
      height: calc(80% - 10px);

      h2 {
        padding-left: 7%;
      }
      .box-list {
        display: flex;
        flex-wrap: wrap;
        padding-left: 7%;
        .box-list-item {
          width: calc(30% - 10px);

          margin-bottom: 10px;
          margin-right: 20px;
          font-size: 15px;
          text-align: center;
          .box-list-item-img {
            width: 100%;
            height: calc(80% - 10px);

            img {
              width: 100%;
              height: 100%;
              border-radius: 5px;
            }
          }
        }
      }
    }
  }
}
</style>
